<script setup>
import { computed } from 'vue'
import { ORDER_STATE,ORDER_TYPE } from '@/global/const'
import { useOrderItemData } from './hooks/useOrderItemData'
import storage from "@/utils/storage";
const props = defineProps({
  order: {
    type: Object,
    default: () => {}
  },
  showOrderTime: {
    type: Boolean,
    default: true
  },
  refreshData: {
    type: Function,
    default: function () {}
  }
})
const { handleOrderAction } = useOrderItemData(props)
const orderType = computed(() => ORDER_TYPE[props.order.typeId])
const orderState = computed(() => ORDER_STATE[props.order.state])
const orderTime = computed(() => props.order.minutes === 0 ? '小于1' : props.order.minutes)
const userInfo = storage.get('userInfo')
const orderBtnPromise = computed(() => {
  if(props.order.state === 0 || props.order.state === 1) {
    return userInfo.id !== props.order.userId
  } else {
    return userInfo.id === props.order.userId
  }

})
</script>

<template>
  <view class="order-item-container">
    <view class="top">
      <view class="left">
        <up-tag size="mini" :type="orderType.type" :text="orderType.name" />
        <view class="desc">{{ props.order.goodsName }}</view>
      </view>
      <view class="right">
        <text class="text">费用</text>
        <text class="price">￥{{props.order.tips || 0}}</text>
      </view>
    </view>
    <view class="bottom">
      <view class="left">
        <text class="order-time" v-if="showOrderTime">{{`已下单 ${orderTime} 分钟`}}</text>
        <text class="status" :style="{ color: orderState.color }">{{ orderState.name }}</text>
      </view>
      <view class="right">
        <view  @click.stop="() => handleOrderAction(props.order)">
          <up-button size="mini"
                     type="primary"
                     v-if="orderBtnPromise"
                     :color="orderState.color"
                     :text="orderState.bntName"
          />
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.order-item-container {
  background-color: #fff;
  padding: 10px;
  border-radius: 5px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .1);
  margin-top: 25rpx;
  .top {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      font-size: 25rpx;
      align-items: center;
      .desc {
        margin-left: 15rpx;
      }
    }
    .right {
      color: $u-tips-color;
      font-size: 25rpx;
      display: flex;
      align-items: center;
      .price {
        color: $uni-color-error;
        margin-left: 15rpx;
        font-size: 30rpx;
      }
    }
  }
  .bottom {
    padding-top: 20rpx;
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: center;
    .left {
      display: flex;
      font-size: 25rpx;
      align-items: center;
      .order-time{
        margin-right: 20rpx;
      }
      .status {
        color: $uni-color-warning;
      }
    }
    .u-button {
      width: 30rpx;
    }
  }
}
</style>
